import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
    ScrollView,
    Image,
    FlatList,
    Dimensions
} from 'react-native';



export default class App extends Component<{}> {
    // componentWillMount会在设置完state后，render前被调用执行
    componentWillMount(){
        // 请求数据
        fetch('http://47.100.185.180/api/list.php')
            .then((x)=>{
                // console.log(x);
                this.setState({
                    list:JSON.parse(x._bodyInit)
                })
            })

    }

    constructor(){
        super();
        this.state={
            list:[
                {aid:'1111',title:'第一篇文章',thumb:'http://bbs.houdunwang.com/data/attachment/block/75/75ef65965733aea55456cbf1c7a9280e.jpg'},
                {aid:'2222',title:'第2篇文章',thumb:'http://bbs.houdunwang.com/data/attachment/block/75/75ef65965733aea55456cbf1c7a9280e.jpg'},
            ]
        }
    }

    // 用来处理每个data数据的函数
    _renderItem = ({item})=>(
        <View style={styles.item}>
            <Image source={{uri:item.imgUrl}} style={styles.itemimage}></Image>
            <Text style={styles.itemtitle}>{item.title}</Text>
        </View>

    )


    render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to 后盾人 React Native!
        </Text>

        <ScrollView
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            onScroll={()=>{console.log('滚动啦！');}}
            style={styles.sview}
            contentContainerStyle={styles.sviewin}
        >
            <Text style={styles.word}>首页</Text>
            <Text style={styles.word}>体育</Text>
            <Text style={styles.word}>热点</Text>
            <Text style={styles.word}>娱乐</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
        </ScrollView>

          {/*图文列表*/}
          <FlatList
              data={this.state.list}
              renderItem={this._renderItem}
              numColumns={2}
              // 指定每个子元素的唯一的key
              keyExtractor={(item)=>item.aid}
          />
            {/*图文列表结束*/}

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
    word:{
    fontSize:20,
        color:'rgba(0,0,0,0.6)',
        paddingLeft:20,
        paddingRight:20,

    },
    sview:{
      // borderWidth:2,
      //   borderColor:'blue',
      //   borderStyle:'solid',
        height: 70,

    },
    sviewin:{
        // 定义子元素在主轴上的方向
        // justifyContent:'center',
        alignItems:'center',
        // backgroundColor:'red'
    },
    item:{
      width:'50%',
        height:180,
        // borderColor:'blue',
        // borderWidth:2,
        // borderStyle:'solid',
        alignItems:'center'
    },
    itemimage:{
        // Dimensions.get('window').width 获得屏幕宽度
      width: Dimensions.get('window').width/2*0.8,
        height: Dimensions.get('window').width/2*0.8*9/16,
    },
    itemtitle:{
      fontSize:16,
        marginTop:10,
        width:'80%'
    }

});
